<template>
	<view class="content">
		<view class="top ">
			<!-- <u-search :show-action="true" v-model="sear.name" actionText="输入选手的姓名或号码牌" @search="getlist()" @custom="getlist()"
				:animation="true"></u-search> -->
				<view class="sr">
					<u-input placeholder="输入选手的姓名或号码牌" v-model="sear.name"  @search="getlist()" @custom="getlist()" placeholderStyle="color:#fff">
						<template slot="suffix"  >
							<image src="../../static/assets/img/sousuo.png" style="width: 33rpx; height: 33rpx;" @click="getlist2()" >
						</template>
					</u-input>
				</view>
			
		</view>
		<view class="center">
			<view class="li flexbc" v-for="item in list" :key="item.id">
				<view class="flexci" @click="dingweidao(item)">
					<view class="tx flexc">
						<image :src="item.head_img"></image>
					</view>
					<view class="name">
						<view>{{item.username}}</view>
						<view>{{item.no}}</view>
					</view>
				</view>

				<view class="shuzhi flexc">
					<view>
						<image src="../../static/assets/img/x22.png" v-if="item.checked == 0"
							@click="guanzhu(item.id,1)"></image>
					</view>
					<view>
						<image src="../../static/assets/img/x2.png" v-if="item.checked == 1"
							@click="guanzhu(item.id,2)"></image>
					</view>
					<view>
						<image src="../../static/assets/img/p4.png" @click="gos(item)"
							style="margin-left: 25rpx;">
					</view>
					<!-- <view><image src="../../static/assets/img/p3.png"></image></view> -->
				</view>
			</view>
			<u-loadmore :status="status" />
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				value: "",
				sear:{
					game_id: uni.getStorageSync('activity_id'),
					user_id: JSON.parse(uni.getStorageSync('person')).id,
					name: "",
					page:1,
					page_size:20,
					//package_id:uni.getStorageSync('pack_id')
				},
				last_page:100,
				guanzhuids: "",
				list: [],
				eventChannel:"",
				status:""
			}
		},
		onLoad() {
			this.getlist()
			this.eventChannel = this.getOpenerEventChannel();

		},
		onReachBottom() {
			if(this.sear.page  >= this.last_page) return ;
			this.status = 'loading';
			this.sear.page = ++ this.sear.page;
			this.getlist()
		},
		methods: {
			//去地图调中心点
			dingweidao:function(item){
				this.$bus.$emit('dingweidao', item); 
				uni.navigateBack()
			},
			gos:function(item){

				uni.setStorageSync('checkren',JSON.stringify(item))
				this.$nextTick(item=>{
					this.eventChannel.emit('songliwu',1)
					uni.navigateBack()
				})
				
			},
			guanzhu: function(id, type) {
				//获取人
				uni.$u.http.post(this.urlass + '/api/position/position/focusliveuser', {
					game_id: uni.getStorageSync('activity_id'),
					user_id: JSON.parse(uni.getStorageSync('person')).id,
					focus_id: id,
					type: type,
					package_id:uni.getStorageSync('pack_id')
				}).then(res => {

					if (res.data.msg.code == 0) {
						if (type == 1) {
							// this.$refs.uToast.show({
							// 	message: "关注成功",
							// 	type: "success"
							// })
						} else {
							// this.$refs.uToast.show({
							// 	message: "取消关注成功",
							// 	type: "error"
							// })
						}
						this.list = []
						this.page = 1
						this.getlist()
					}else{
						this.$refs.uToast.show({
							message: res.data.msg.info,
							type: "error"
						})
					}
				})
			},

			getlist: function() {
				//获取人
				uni.$u.http.get(this.urlass + '/api/position/position/allliveuser', {
					params: this.sear
				}).then(res => {
					res.data.data.data.forEach(item=>{
						this.list.push(item)
					})
					
					
					this.last_page = res.data.data.last_page
				})
			},
			getlist2:function(){
				this.list = []
				this.page = 1
				this.getlist()
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		
		.top {
			width: 750rpx;
			position: relative;
			padding: 30rpx;
			
			.sr {
				background: rgba(0, 0, 0, 0.3);
				padding: 10rpx 30rpx;
				border-radius: 40rpx;
			}
			
			/deep/ .u-input {
				border: 0;
				padding: 0 !important;
			
			}
			
			/deep/ .u-input__content__field-wrapper__field {
				color: #FFFFFF !important;
				font-size: 12px !important;
			}
			
			.dier {
				position: absolute;
				left: 75rpx;
				top: 370rpx;
				text-align: center;
			}

			.diyi {
				position: absolute;
				left: 320rpx;
				top: 340rpx;
				text-align: center;
			}

			.disan {
				position: absolute;
				left: 574rpx;
				top: 370rpx;
				text-align: center;
			}

			.hg {
				position: relative;
				top: 8rpx;

				image {
					width: 47rpx;
					height: 36rpx;
				}
			}

			.tx {
				image {
					width: 109rpx;
					height: 109rpx;
					border-radius: 109rpx;
					border: 3px #2979FF solid;
				}
			}

			.name {
				color: #FFFFFF;
				margin: 20rpx 0;
				font-size: 30rpx;
			}

			.num {
				text-shadow: 0px 4px 7px #3B0094;
				font-weight: bold;
				color: #FFFFFF;
				font-size: 50rpx;
			}
		}

		.center {
			padding: 30rpx;
			width: 750rpx;

			.li {
				border-bottom: 1px #F2F2F2 solid;
				padding: 20rpx 0;

				.num {
					width: 100rpx;
					text-align: center;
					font-weight: 900;
					color: #522FAE;
					font-size: 29rpx
				}

				.tx {
					image {
						width: 82rpx;
						height: 82rpx;
						border-radius: 82rpx;
					}
				}

				.name {
					padding-left: 25rpx;
					text-align: left;
					font-size: 25rpx
				}

				.shuzhi {
					span {
						padding: 15rpx 30rpx;
						background: rgba(86, 40, 166, 0.08);
						border-radius: 30rpx;
						color: #522FAE;
						font-weight: bold;
					}

					image {
						width: 56rpx;
						height: 56rpx;
						margin-left: 20rpx;
					}
				}
			}

		}
	}
</style>
